<template>
  <div
    @mouseenter="stop"
    @mouseleave="leave"
    class="relative" style="width: 100%; height: 100%" ref="environmentalDiv">
    <div class="until_title">环境监控</div>
    <transition-group
      class="scroll"
      :style="{height: `${height - 30}px`, width: `${width}px`}"
      style="margin-top: -20px"
      @after-enter="enter"
      @after-leave="handleAfterLeave"
      name="list"
      tag="div">
      <div :key="0" ref="environmentalMonitor" v-show="0 === currentIndex" :style="{width: `${width}px`, height: `${height - 30}px`}"></div>
      <div :key="1" v-show="1 === currentIndex">
        <weather  :style="{width: `${width}px`, height: `${height - 30}px`}"></weather>
      </div>
      <div :key="3" ref="temperature" v-show="2 === currentIndex" :style="{width: `${width}px`, height: `${height - 30}px`}"></div>
    </transition-group>
    <div class="scroll-left" @click="prev" v-show="visible">
      <i class="iconfont icon-t-arrow"></i>
    </div>
    <div class="scroll-right" @click="next"  v-show="visible">
      <i class="iconfont icon-r-arrow"></i>
    </div>
  </div>
</template>

<script>
  import dust from './dust.js'
  import temperature from './temperature.js'
  import { mapGetters } from 'vuex'
  export default {
    name: 'environmentalMonitor',
    mixins: [dust, temperature],
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        dustStageData: {},
        visible: false,
        firstTnitTemperature: true,
        currentIndex: 0,
        width: 0,
        height: 0
      }
    },
    components: {
      weather (resolve) {
        require(['./weather.vue'], resolve)
      }
    },
    watch: {
      currentUser () {
        if (this.currentUser.mid && this.$route.name === 'projectVideo') {
          this.getDustStageData()
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        const rectProson = this.$refs.environmentalDiv.getBoundingClientRect()
        this.height = rectProson.height
        this.width = rectProson.width
        this.$nextTick(() => {
          this.init()
          this.getDustStageData()
          if (!this.dustStageDataInterval) {
            this.dustStageDataInterval = setInterval(() => {
              if (this.$route.name === 'projectVideo') {
                this.getDustStageData()
              }
            }, 1000 * 60 * this.$pollingTime)
          }
        })
      })
    },
    activated () {
      this.getDustStageData()
    },
    methods: {
      init () {
        if (!this.timer) {
          this.timer = setInterval(() => {
            this.currentIndex++
            if (this.currentIndex > 2) {
              this.currentIndex = 0
            }
          }, 1000 * 5)
        }
      },
      prev () {
        this.currentIndex--
        if (this.currentIndex < 0) {
          this.currentIndex = 1
        }
      },
      next () {
        this.currentIndex++
        if (this.currentIndex > 2) {
          this.currentIndex = 0
        }
      },
      stop () {
        this.visible = true
        window.clearInterval(this.timer)
        this.timer = null
      },
      leave () {
        this.visible = false
        this.init()
      },
      enter () {
        if (this.currentIndex === 2 && this.firstTnitTemperature) {
          this.firstTnitTemperature = false
          this.initTemperature()
        }
      },
      getDustStageData () {
        const data = {
          'stageId': this.currentUser.stageId,
          'pjId': this.currentUser.pjId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/screen/getDustStageData`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          this.dustStageData = res.data.data
          this.initDust()
          this.initTemperature()
        })
      },
      handleAfterLeave () {
      }
    }
  }
</script>
